import hljs from 'highlight.js';
import { IconContext } from 'react-icons';
import { FcFile, FcFolder } from 'react-icons/fc';
import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm';

function isNotMaster(pathArray) {
  if (pathArray.length > 2) {
    if (pathArray[2] !== 'master') {
      return true;
    } else return false;
  } else return false;
}

function getSubArray(pathArray, depth) {
  if (depth === 0) {
    if (isNotMaster(pathArray)) {
      return pathArray.slice(0, 1).concat('tree', pathArray[2]);
    } else return pathArray.slice(0, 1);
  } else return pathArray.slice(0, 1).concat('tree', pathArray.slice(2, depth + 1));
}

async function getServerSideProps(context) {
  const res = await fetch('http://localhost:3000/api' + context.resolvedUrl);
  const data = await res.json();

  return { props: { data } };
}

function MidSection(props) {
  return (
    <div className="h-16 p-8">
      {props.children}
    </div>
  );
}

function MainContentContainer(props) {
  return (
    <div className="border border-slate-400 rounded-lg p-8">
      {props.children}
    </div>
  );
}

function BreadCrumbTrail(props) {
  const pathArray = props.pathArray;
  
  const recursion = (acc) => {
    if (acc.length === pathArray.length - 1) {
      return acc;
    } else {
      const subArray = getSubArray(pathArray, acc.length);

      const breadCrumb = {
        name: pathArray[acc.length],
        href: '/' + subArray.join('/'),
      };

      const newAcc = acc.concat([breadCrumb]);
      return recursion(newAcc);
    }
  };

  if (pathArray.length < 4) {
    return null;
  }

  const breadCrumbs = recursion([]);
  
  // remove repoRequest and commit
  breadCrumbs.splice(1, 2);

  return (
    <div>
      {breadCrumbs.map((breadCrumb) => (
        <span>/ <a href={breadCrumb.href}>{breadCrumb.name}</a> </span>
      ))}
      <span>/ {pathArray[pathArray.length - 1]}</span>
    </div>
  );
}

function DirectoryListing(props) {
  const resultPath = props.resultPath;

  const makeURL = (repoRequest, item) => {
    const parentTail = resultPath.length > 2 ? resultPath.slice(2) : ['master'];
    const parentPath = resultPath.slice(0, 1).concat(repoRequest, parentTail);
    const url = '/' + parentPath.join('/') + '/' + item;
    return url;
  }
  
  return (
    <IconContext.Provider value={{ size: "2em" }}>
      <ul className="text-lg divide-y divide-slate-300">
        {props.resultContent.trees.map((item) => (
          <li className="h-12 flex items-center">
            <div className="pr-4">
              <FcFolder />
            </div>
            <a href={makeURL('tree', item)}>{item}</a>
          </li>
        ))}
        {props.resultContent.blobs.map((item) => (
          <li className="h-12 flex items-center">
            <div className="pr-4">
              <FcFile />
            </div>
            <a href={makeURL('blob', item)}>{item}</a>
          </li>
        ))}
      </ul>
    </IconContext.Provider>
  );
}

function CommitListing(props) {
  const subArray = props.resultContent.slice(1);
  
  return (
    <ul className="text-lg divide-y divide-slate-300">
      <li className="h-12 flex items-center">
        <a href={'/' + props.resultPath[0]}>{props.resultContent[0].message}</a>
      </li>
      {subArray.map((item) => (
        <li className="h-12 flex items-center">
          <a href={'/' + props.resultPath[0] + '/tree/' + item.id}>{item.message}</a>
        </li>
      ))}
    </ul>
  );
}

function LineNos(props) {
  const count = props.textBlob.split('\n').length;
  const lineNos = [...Array(count).keys()].map((x) => x + 1).join('\n');

  return (
    <pre className="text-right text-slate-400">
      {lineNos}
    </pre>
  );
}

function CodeBlock(props) {
  const highlightedHTML = hljs.highlightAuto(props.textBlob).value;
  
  return (
    <pre>
      <code dangerouslySetInnerHTML={{ __html: highlightedHTML }} />
    </pre>
  );
}

function TextDisplayGrid(props) {
  return (
    <div className="flex">
      <div className="overflow-x-auto"><CodeBlock textBlob={props.textBlob} /></div>
      <div className="pr-8 order-first"><LineNos textBlob={props.textBlob} /></div>
    </div>
  );
}

function PageSubstance({ data }) {
  switch (data.resultType) {
    case 'rootDirectory':
      return (
        <div>
          <MidSection>
            <BreadCrumbTrail pathArray={data.resultPath} />
          </MidSection>
          <MainContentContainer>
            <DirectoryListing resultContent={data.resultContent.entryNamesSorted} resultPath={data.resultPath} />
          </MainContentContainer>
          {data.resultContent.readmeExists &&
            <div className="h-16" />
          }
          {data.resultContent.readmeExists &&
            <MainContentContainer>
              <ReactMarkdown remarkPlugins={[gfm]} children={data.resultContent.readmeBlob} />
            </MainContentContainer>
          }
        </div>
      );
      
      break;
    case 'nonRootDirectory':
      return (
        <div>
          <MidSection>
            <BreadCrumbTrail pathArray={data.resultPath} />
          </MidSection>
          <MainContentContainer>
            <DirectoryListing resultContent={data.resultContent} resultPath={data.resultPath} />
          </MainContentContainer>
        </div>
      );
      
      break;
    case 'textBlob':
      return (
        <div>
          <MidSection>
            <BreadCrumbTrail pathArray={data.resultPath} />
          </MidSection>
          <MainContentContainer>
            <TextDisplayGrid textBlob={data.resultContent} />
          </MainContentContainer>
        </div>
      );

      break;
    case 'binaryBlob':
      return (
        <div>
          <MidSection>
            <BreadCrumbTrail pathArray={data.resultPath} />
          </MidSection>
          <MainContentContainer>
            <p>Binary content cannot be displayed.</p>
          </MainContentContainer>
        </div>
      );

      break;
    case 'commits':
      return (
        <div>
          <MidSection>
          </MidSection>
          <MainContentContainer>
            <CommitListing resultContent={data.resultContent} resultPath={data.resultPath} />
          </MainContentContainer>
        </div>
      );
      
      break;
    case 'error':
      return (
        <div>
          <h1>Error:</h1>
          {data.resultContent}
        </div>
      );

      break;
    default:
      return (
        <div>
          <h1>Error:</h1>
          <p>Backend error: result type not recognised.</p>
        </div>
      );
  }
}

function Main({ data }) {
  return (
    <div>
      <header className="h-48 bg-slate-100 border-b border-slate-400"></header>
      <main>
        <div className="container mx-auto">
          <PageSubstance data={data} />
        </div>
      </main>
      <footer className="h-48"></footer>
    </div>
  );
}

export { getServerSideProps };
export default Main;